<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>标签选择器</title>

<style >

h1 {
 color: blue;
}

/*
---------属性选择器,一个元素可以同时使用多个属性 (class)--------------------
*/

.box1 {
width: 100px;
height: 100px;
background-color: red;

}

.box2 {

border: 10px solid blue;

}


/*子集的style
寻找 class = 'node'下的  div
格式 .属性+空格+标签名
*/

.node div {
width: 200px;
height: 100px;

background-color: blue

}

.node div div{
width: 100px;
height: 100px;

background-color: green;
}

/*子集的style
寻找 class = 'node'下的  div
格式 .属性+空格+标签名
*/

#n_100 div {
width: 200px;
height: 100px;

background-color: yellow;

}

#n_100 div div{
width: 100px;
height: 100px;
background-color: blue;
}


/*id=parentID 下的 id=chlidID*/
#parentID #chlidID {

  width: 100px;
  height: 100px;
  background-color: pink;


}


/*id=parentID 下的 classv*/
#parentIDDiv .chlidDiv {

  width: 100px;
  height: 100px;
  background-color: orange;


}


/*测试class*/
.tclass {
width:100px;
height: 100px;


}

/* 通配符 * */

#div_123 * {
 height: 50px;
 border: 2px solid red;

}

</style>

  </head>

  <body>


  <!-- 样式优先级 -->
    <h1>样式优先级: 行间样式 > id > class > 标签   </h1>
    <p>多重选择器的优先级等于每一级的权重值相加</p>
    <hr>

<!--  -->
<h1>多重属性选择</h1>

<div class="box1 box2">
</div>

<hr>

<!--  -->
<h1>包含选择, #id div </h1>
<div class="node">
<div >
node下一级的div
<div >
node下2级的div
</div>
</div>
</div>

<hr>

<!-- id下的 子级标签 -->
<h1>包含选择, #id class </h1>
<div id="n_100">
<div >
node下一级的div
<div >
node下2级的div
</div>
</div>
</div>

<hr>


<!-- id下的 子级标签 -->
<h1>包含选择, #id #id </h1>

<div id="parentID">
  父级
  <div id="chlidID">
      子级
  </div>
</div>

<!-- id下的 子级class 标签 -->
<h1>包含选择, #id .class </h1>

<div id="parentIDDiv">
  父级
  <div class="chlidDiv">
      子级
  </div>
</div>

<!-- 优先级测试 -->
<h1> css优先级测试 </h1>
<div class="tclass" style="background-color:blue">
优先级测试
</div>


<!-- 通配符 -->
<hr>
<h1> 通配符.....</h1>
<div id="div_123">

<div >
  sdajhsa djhd
</div>

</div>





  </body>
</html>
